import 'package:demo/InteractiveViewPage.dart';
import 'package:extended_image/extended_image.dart';
import 'package:flutter/material.dart';
import 'package:interactiveviewer_gallery/hero_dialog_route.dart';

import 'PictureOverviewWidget.dart';

List<String> imgList = [
  "http://file.jinxianyun.com/inter_06.jpg",
  "http://file.jinxianyun.com/inter_05.jpg",
  "http://file.jinxianyun.com/inter_02.jpg",
  "http://file.jinxianyun.com/inter_04_pre.png",
  "http://file.jinxianyun.com/102.png",
  "http://www.chinatoday.com.cn/zw2018/rdzt/zglz/jzfp/202305/W020230518372826923506.jpg",
  "http://10.10.24.95/file//normal/2023/05/26/adcef604-bb40-41cf-ad06-cc90c7960cc1.jpg",
  "http://10.10.24.95/file//normal/2023/02/09/84e63112-9af5-45db-aa2e-892884555a2e.jpg",
  "http://10.10.24.95/file//normal/2023/02/09/e1e473e4-12e9-4541-aeea-d9ede74b1392.jpeg",
];

class PictureWidget extends StatefulWidget {
  const PictureWidget({super.key});

  @override
  State<StatefulWidget> createState() {
    return _PictureWidget();
  }
}

class _PictureWidget extends State<PictureWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: const Icon(Icons.arrow_back),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
        title: const Text("图片预览"),
        centerTitle: true,
        toolbarHeight: 50,
        backgroundColor: Colors.white,
        titleTextStyle: const TextStyle(color: Colors.blue),
      ),
      body: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[getTextImage(), getImageList()],
        ),
      ),
    );
  }

  Widget getTextImage() {
    return GestureDetector(
      onTap: () {
        Navigator.of(context).push(
          HeroDialogRoute<void>(
            builder: (BuildContext context) => const InteractiveViewPage(),
          ),
        );
      },
      child: Container(
        width: double.infinity,
        height: 44,
        alignment: Alignment.center,
        child: const Text(
          "InteractiveViewerGallery",
          style: TextStyle(
            color: Colors.white,
            shadows: [
              Shadow(color: Colors.black, offset: Offset(.5, .5), blurRadius: 2)
            ],
          ),
        ),
      ),
    );
  }

  Widget getImageList() {
    return GridView.builder(
        itemCount: imgList.length,
        shrinkWrap: true,
        padding: EdgeInsets.zero,
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          mainAxisSpacing: 12,
          mainAxisExtent: 100,
          crossAxisSpacing: 20,
        ),
        itemBuilder: (context, index) {
          return GestureDetector(
            child: getImageItem(imgList[index]),
            onTap: () {
              var page = PictureOverviewWidget(
                imageList: imgList, //传入图片list
                defaultIndex: index, //传入当前点击的图片的index
              );
              // Navigator.of(context).push(
              //   HeroDialogRoute<void>(
              //     builder: (BuildContext context) => page,
              //   ),
              // );

              Navigator.push(
                context,
                PageRouteBuilder(
                    opaque: false,
                    pageBuilder: (context, animation, secondaryAnimation) {
                      return page;
                    }),
              );
            },
          );
        });
  }

  Widget getImageItem(item) {
    return Hero(
      tag: item,
      //动画执行后，将占位符小部件保留为 Hero 的 child
      placeholderBuilder: (BuildContext context, Size heroSize, Widget child) {
        return child;
      },
      child: ExtendedImage.network(
        item,
        fit: BoxFit.fill,
      ),
    );
  }
}
